<template>
	<view class="bg">
		<scroll-view scroll-x="true" class="scroll">
			<view v-for="(item,index) in headeData" :key="item" class="headerText"
				:class="{textActive:index==isTureHeadeData}">
				<view class="" @tap="changeActive(index)">
					<text>{{item}}</text>
				</view>
				<view class="itemLine" :class="{active:index==isTureHeadeData}"></view>
			</view>

		</scroll-view>
		<swiper style="height: 100vh;" :current="isTureHeadeData" @change="isHeader">
			<swiper-item v-for="item in headeData" :key="item">
				<view class="swiper-item" style="height: 100vh;">
					<wyb-table ref="table" :headers="headers" :contents="SeniorityData" height="100vh" :url-col="urlCol"
						:font-size="fontSize" :sort-col="sortCol" first-line-fixed="true" class="wybTable"
						:format-col="formatCol" header-bg-color="#ffffff" header-ft-color="#999999"
						content-ft-color="#333333" first-col-bg-color="#ffffff" :value-format="valueFormat" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState
	} = createNamespacedHelpers("selectall");
	export default {
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				selectallData: {
					limit: 1,
					page: 1
				},
				headeData: [
					'全部', '股票型', '债券型', '混合型', '指数型', 'QDII型'
				],
				isTureHeadeData: 0,
				fontSize: [24, 26],
				headers: [{
						label: '基金名称',
						key: 'fundName'
					}, {
						label: '单位净值',
						key: 'netValue'
					}, {
						label: '一周收益',
						key: 'dayOfGrowth'
					}, {
						label: '一月收益',
						key: 'lastMonth'
					}, {
						label: '三月收益',
						key: 'sellRate'
					}, {
						label: '半年收益',
						key: 'lastHalfYear'
					},
					{
						label: '年收益',
						key: 'lastHalfYear'
					},
					{
						label: '成立以来',
						key: 'netValue'
					}
				],
				sortCol:
					// 数组中每个元素代表一列，这些列可以作为排序的基准
					// 这些列的表头会出现排序的图标
					[{
						key: 'netValue',
						// 所在列的key值（表头的key）
						isNumber: false,
						// 该列数据是不是数字或者日期，日期例子：(2020-09-04 08:00) (2020/06/04) (08:00:06)
					}, {
						key: 'dayOfGrowth',
						isNumber: true
					}],
				formatCol: [{
					key: 'dayOfGrowth',
					template: "#dayOfGrowth#%",
					bottomComputedFormat: true
				}, {
					key: 'lastMonth',
					template: '#lastMonth#%',
					bottomComputedFormat: false
				}],
				valueFormat: [
					{
					type: 'bigger',
					range: 0,
					key: 'lastMonth',
					style: {
						color: '#f00'
					}
				},
				{
					type: 'bigger',
					range: 0,
					key: 'dayOfGrowth',
					style: {
						color: '#f00'
					}
				}]
			}

		},
		methods: {
			...mapActions(['getSeniority', 'getFund']),
			changeActive(index) {
				this.isTureHeadeData = index
			},
			isHeader(e) {

				this.isTureHeadeData = e.detail.current;
				this.getFund(e.detail.current);
			},

		},
		components: {
			wybTable,

		},
		computed: {
			...mapState(["SeniorityData"])
		},
		onLoad() {
			this.getSeniority(this.selectallData)
		}
	}
</script>

<style lang="scss">
	.bg {
		background: rgba(153, 153, 153, 0.1);
	}

	.scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 10rpx;
		background: #FFFFFF;

		.headerText {
			display: inline-block;
			width: 145rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
		}

		.itemLine {
			width: 80rpx;
			height: 6rpx;
			margin: 0 auto;
			border-radius: 12rpx;
		}

		.textActive {
			color: #3476F1;
			font-size: 28rpx;
		}

		.active {
			background: #007AFF;

		}
	}
</style>
